<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<!-- <view class="logo"> -->
				<!-- <img src="/static/images/reg-logo.png"> -->
				<!-- <img :src="shop.cover" style="max-width: 50vw;"> -->
			<!-- </view> -->
			<view>
				<view style="font-size: 2em;font-weight: bold;">您好</view>
				<view style="font-size: 1.5em;line-height: 1.8;margin-bottom: 1em;">欢迎使用多路片服务号</view>
			</view>
			<!-- <view class="title">会员登陆 <text style="font-size: .5em; padding:0 1em;">请用微信访问</text></view> -->
			<label class="u-border-bottom">
				<view class="tips">手机号</view>
				<input  type="number" v-model="mobile" placeholder="手机号" />
			</label>
			<label class="u-border-bottom">
				<view class="tips">密码/验证码</view>
				<input style="flex:1" type="password" v-model="password" placeholder="登陆密码/验证码" />
				<view class="tips" style="text-align: right;">发送验证码</view>
			</label>
			<view class="sm-font">
				<img src="/static/images/selected.png" class="select-icon">
				<!-- <img src="/static/images/unselected.png" class="select-icon" v-if="!agreement" @click="agreement=true"> -->
				<span>登陆即表示阅读并同意<text class="link-color" @click="openAgreement">《用户协议》</text>和<text class="link-color" @click="openPrivacy">《隐私条款》</text></span>
			</view>
			<button @tap="submit" class="getCaptcha">登陆</button>
			<!-- <view class="alternative">
				<view class="password">密码登录</view>
				<view class="issue">遇到问题</view>
			</view> -->
			<!-- <view class="login-box"><span class="link-color" @click="openPage('/pages/ucp/registration')">新用户注册</span></view> -->
		</view>
		<!-- <wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				shop: {}
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.mobile && this.password) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['primary'];
					// style.backgroundColor = '#007aff';
				}
				return style;
			}
		},
		onShow() {
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route;
			let curParam = routes[routes.length - 1].options;
			let fromURL = window.location.protocol + '//' + window.location.host + '/#/';
			if (curParam && curParam.redirect && curParam.redirect != '/pages/login/index') {
				fromURL += curParam.redirect;
			}
			let en = window.navigator.userAgent.toLowerCase();
			if (en.match(/MicroMessenger/i) == 'micromessenger') {
				// 微信中，自动跳转微信授权登陆
				window.location.href = 'https://duolupian.mafutech.com.cn/api/h5-api/login/wechat-auth?login_key=' + uni.getStorageSync(
					'token') + '&from_url=' + encodeURIComponent(fromURL);
			} else {
				console.log('not wechat')
				// 停留在登陆页面，用户输入账号密码或短信验证登陆

			}
		},
		onLoad() {
			this.getShop()
		},
		methods: {
			openAgreement(){
				if(this.shop.user_agreement_id){
					return this.openPage('/pages/article/detail',{id:this.shop.user_agreement_id})
				}
				this.openPage('/pages/ucp/index')
			},
			openPrivacy(){
				if(this.shop.privacy_article_id){
					return this.openPage('/pages/article/detail',{id:this.shop.privacy_article_id})
				}
				this.openPage('/pages/ucp/index')
			},
			submit() {
				if (this.$u.test.mobile(this.mobile) && this.password) {
					this.$u.post('/user/login', {username:this.mobile,password:this.password}).then(res => {
						console.log(res)
						if(res && res.token){
							uni.setStorageSync('token',res.token)
							let fromURL = window.location.protocol + '//' + window.location.host + '/#/'
							location.href = fromURL
						}
					}).catch(e => {
						console.log(e)
					})
					this.$u.route({
						url: 'pages/template/login/code'
					})
				}else{
					uni.showToast({
						title: '手机号格式错误',
						icon: 'error'
					});
				}
			},
			openPage(jumpURL, params = {}) {
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			// width: 600rpx;
			margin: 80rpx 60rpx;
			.logo{
				margin-bottom: 50rpx;
				text-align: center;
				img{
					max-width: 100%;
				}
			}

			.title {
				text-align: left;
				font-size: 48rpx;
				font-weight: 500;
				margin-bottom: 50rpx;
				img{
					max-width: 80%;
				}
			}

			label {
				display: flex;
				// border-bottom: 1px solid #dbdbdb;
				margin-bottom: 18rpx;
				padding:18rpx 0;
			}

			input {
				text-align: left;
				// margin-bottom: 10rpx;
				// padding-bottom: 6rpx;
			}

			input[short]{
				width:4em;
			}

			.tips {
				color: $u-type-info;
				// margin-bottom: 44rpx;
				// margin-top: 18rpx;
				color: #02396a;
				width: 7em;
			}
			.link-color{
				color:#347caf;
			}

			.getCaptcha {
				background-color: #fe4543;
				color: $u-tips-color;
				color: #fff;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;
				border-radius: 60rpx;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}

			.u-border-bottom::after{
				border-color: #9d9ea0;
			}

			uni-input{
				// padding-bottom:20rpx;
			}
			.sm-font{
				font-size: .9em;
				margin-bottom: 1em;
				line-height: 1.8;
			}
			.login-box{
				text-align: right;
				padding: 40rpx 0 50rpx 0;
			}
			.select-icon{
				height: 28rpx;
				display: inline-block;
				margin-right: .5em;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
		.login-button{
			color: rgb(255, 255, 255);
			background-color: #347caf;
		}


	}


</style>
